<template>
  <div class="yoyo-container mx-auto sticky top-0 left-0 right-0 z-999">
    <!-- <van-nav-bar class="bg-white" left-arrow @click-left="onClickLeft" fixed placeholder safe-area-inset-top>
      <template #left>
        <img :src="backSrc" class="w-6 h-6" alt="" />
      </template>
      <template #title>{{ title }}</template>
    </van-nav-bar> -->

    <div class="md:hidden h-12 flex items-center bg-white w-full lg:mx-4 lg:w-[calc(100%-2rem)] px-4" v-if="showMobileNavbar">
      <div class="flex-1" @click="onClickLeft">
        <img class="w-6 h-6" :src="backSrc" alt="" v-if="showBack" />
      </div>
      <slot name="title">
        <div class="flex-2 text-center">{{ title }}</div>
      </slot>
      <slot name="right">
        <div class="flex-1">{{ right }}</div>
      </slot>
    </div>

    <div
      class="h-12 flex items-center justify-between bg-[#fff] hidden md:flex w-full lg:mx-4 lg:w-[calc(100%-2rem)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)] ">
      <img :src="logoSrc" alt="" class="w-40 h-auto cursor-pointer" @click="handleLogoClick" />
      <div class="flex items-center">
        <div
          v-for="item in filterTabbarItems()"
          :key="item.name"
          class="h-12 flex items-center justify-center px-4 cursor-pointer hover:bg-gray-100 transition-colors duration-200"
          @click="handleTabbarClick(item)">
          <img :src="item.icon" :class="['w-25 h-auto']" />
          <!-- <span class="text-md ml-1">{{ isZh ? item.name : item.nameEn }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "navBar",
  props: {
    title: {
      type: String,
      default: "",
    },
    right: {
      type: String,
      default: "",
    },
    showBack: {
      type: Boolean,
      default: true,
    },
    showMobileNavbar: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      logoSrc: require("@/assets/images/logo.png"),
      backSrc: require("@/assets/images/back.png"),
    }
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
    tabbarItems() {
      return this.isZh
        ? [
            {
              name: "购物车",
              nameEn: "Cart",
              icon: require("@/assets/images/PC/cart.png"),
              to: { name: "cart", query: { showTabbar: true } },
            },
            {
              name: "YOYO币介绍",
              nameEn: "Introduction to YOYO Coin",
              icon: require("@/assets/images/PC/yoyo.png"),
              to: { name: "yoyoCoinIntroduce" },
            },
            {
              name: "个人中心",
              nameEn: "Personal center",
              icon: require("@/assets/images/PC/my.png"),
              to: { name: "mine" },
            },
          ]
        : [
            {
              name: "Cart",
              nameEn: "Cart",
              icon: require("@/assets/images/PC/cart-en.png"),
              to: { name: "cart", query: { showTabbar: true } },
              w: 8,
            },
            {
              name: "Introduction to YOYO Coin",
              nameEn: "Introduction to YOYO Coin",
              icon: require("@/assets/images/PC/yoyo-en.png"),
              to: { name: "yoyoCoinIntroduce" },
              w: 10,
            },
            {
              name: "Personal center",
              nameEn: "Personal center",
              icon: require("@/assets/images/PC/my-en.png"),
              to: { name: "mine" },
              w: 10,
            },
          ]
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    handleTabbarClick(item) {
      this.$router.push(item.to)
    },
    filterTabbarItems() {
      const list = this.tabbarItems.filter((item) => {
        // console.log("item :>> ", item.to.name, this.$route.name)
        return item.to.name !== this.$route.name
      })
      // console.log("list :>> ", list)
      return list
    },
    handleLogoClick() {
      this.$router.push({ name: "home" })
    },
  },
  created() {
    this.filterTabbarItems()
    console.log("this.$route :>> ", this.$route)
  },
}
</script>
